import Vue from 'vue'
import i18n from '../../lang' // Internationalization
import store from '../../store/'
import router from '../../router'

import PageDrawer from '@/components/Drawer/drawer.vue'
import FullParentDomWithDask from '@/components/LoadDataSpin/FullParentDomWithDask.vue'
import {axios} from "@/utils/request";

let MyComponent = Vue.extend({...PageDrawer,
  name:'pageDrawer1',
  //动态创建组件，扩展需要定义（main.js 中new Vue 定义了根实例，通过模板方式创建的子组件已继承根实例的扩展）;设置parent则会继承、无需定义
  i18n,
  store,
  router
})
let cache = {};
let counter = 1;

function getAndAddCount() {
  return counter ++;
}
export default {
  /**
   *
   * @param key
   * @param config  PageDrawer.initDrawerConfig；可以定义key，用于在参数key相同时、区分是否需要reset缓存的实例
   * @returns {*}
   */
  open(key, config) {
    if (cache[key] && document.querySelector("#pageContentMain #" + cache[key].id)) {
      if (config.key && config.key !== cache[key].drawerConfig.key) {
        this.reset(key, FullParentDomWithDask);
        cache[key].drawerConfig.key = config.key;
        Vue.nextTick(() => {
          this.open(key, config);
        })
        return;
      }
      cache[key].value = true;
      cache[key].drawerConfig = Object.assign(cache[key].drawerConfig, config);
      // if (cache[key].vars) {
      //   cache[key].vars = config.vars;
      // }
      // cache[key].drawerConfig.vars = Object.assign(cache[key].drawerConfig.vars, config.vars);
    }else{
      let parent = config.vueInstance;
      if (!parent) {
        let matched = router.currentRoute.matched;
        parent = matched[matched.length - 1].instances.default;
      }
      //方法一：new 组件。若设置parent，不需要引入扩展、且vue dev tool 中能看见组件，不设置则组件内antd国际化错误；但设置parent后操作props 会提示props being mutated
      // MyComponent.options.parent = parent;
      // let pageDrawer = new MyComponent();
      // pageDrawer.drawerConfig = Object.assign({...PageDrawer.initDrawerConfig}, config);
      // // pageDrawer.value = true;
      // pageDrawer.index = getAndAddCount();
      // pageDrawer.id = 'drawer-' + pageDrawer.index;
      // pageDrawer.$on('close',  (val) => {
      //   this.close(key)
      // })
      // pageDrawer.$on('change',  (val) => {
      //   pageDrawer.value = val;
      // });

      // 方法二：new Vue创建组件。设置parent，会报props being mutated
      // let pageDrawer = new Vue({...PageDrawer,
      //   //动态创建组件，扩展需要定义（main.js 中new Vue 定义了根实例，通过模板方式创建的子组件已继承跟实例的扩展）
      //   i18n,
      //   store,
      //   parent
      // });
      // pageDrawer.drawerConfig = Object.assign({...PageDrawer.initDrawerConfig}, config);
      // pageDrawer.value = true;
      // pageDrawer.index = getAndAddCount();
      // pageDrawer.id = 'drawer-' + pageDrawer.index;
      // pageDrawer.$on('close',  (val) => {
      //   this.close(key)
      // })
      // pageDrawer.$on('change',  (val) => {
      //   pageDrawer.value = val;
      // });

      //方法三： 定义新组件，引用组件，new Vue创建组件时创建子组件。需要打开 runtimeCompiler
      // let _this = this;
      // let pageDrawer = new Vue({
      //   components:{PageDrawer},
      //   template: '<PageDrawer :id="id" v-model="visible" :drawer-config="drawerConfig" @close="close"/>',
      //   data: ()=>{
      //     return {
      //       drawerConfig : Object.assign({...PageDrawer.initDrawerConfig}, config),
      //       value: true,
      //       id: 'drawer-' + getAndAddCount()
      //     }
      //   },
      //   methods:{
      //     close() {
      //       _this.close(key);
      //     }
      //   },
      //   //动态创建组件，扩展需要定义（main.js 中new Vue 定义了根实例，通过模板方式创建的子组件已继承跟实例的扩展）
      //   //i18n,
      //   //store,
      //   parent
      // });
      //方法四：定义新组件，通过render函数createElement创建子组件并传递props、监听事件，new Vue创建组件
      let _this = this;
      let pageDrawer = new Vue({
        name : 'pageDrawerWrapper',
        components: {PageDrawer},
        data: ()=>{
          return {
            drawerConfig : Object.assign({...PageDrawer.initDrawerConfig}, config),
            value: true,
            vars: config.vars,
            id: 'drawer-' + getAndAddCount()
          }
        },
        methods:{
          close() {
            _this.close(key);
          }
        },
        //动态创建组件，扩展需要定义（单文件入口js中new Vue 定义了根实例，通过模板方式创建的子组件已继承根实例的扩展），指定parent则不用
        i18n,
        store,
        parent,
        render(h) {
          let vm = this;
          // 同方法三，jsx、template 都需要编译，而函数则不需要
          // return (
          //   <PageDrawer id={this.id} v-model={this.value} drawer-config={this.drawerConfig} onClose={this.close}/>
          // )
          return h('PageDrawer', {
            props: {
              id: this.id,
              value: this.value,
              vars: this.vars,
              drawerConfig: this.drawerConfig,
            },
            on : {
              change(val) {
                vm.value = val;
              },
              close() {
                vm.close();
              }
            }
          })
        }
      });

      //先缓存，避免渲染过程中 组件修改配置
      cache[key] = pageDrawer;

      let div = document.createElement('div');
      div.id = pageDrawer.id;
      document.querySelector("#pageContentMain .pageViewSty").appendChild(div)
      pageDrawer.vm = pageDrawer.$mount("#" + div.id)
      // pageDrawer.vm = pageDrawer.$mount();
      // div.appendChild(pageDrawer.$el)
    }
  },
  reset(key, loadCom) {
    if (cache[key]) {
      if (!document.getElementById(cache[key].id)) {
        delete cache[key]
        console.error("重置缓存抽屉时，抽屉已不存在" + key)
        return
      }
      // cache[key].value = true;
      const data = {...PageDrawer.initDrawerConfig};
      if (loadCom) {
        data.width = cache[key].drawerConfig.width
        data.vars = { loading: true }
        data.compName = loadCom
      }
      cache[key].drawerConfig = {...data }
      cache[key].vars = data.vars
    }
  },
  show(key, visible) {
    if (cache[key]) {
      cache[key].value = visible;
    }
  },
  close(key) {
    if (cache[key]) {
      if (cache[key].drawerConfig.onClose && cache[key].drawerConfig.onClose() === false) {
        return false;
      }
      cache[key].vm.$destroy();
      let element = document.getElementById(cache[key].id);
      element && element.remove()
      delete cache[key]
    }
    return true;
  }
}